<template>
  <el-scrollbar class="app_mainView">
    <el-row :gutter="10" class="el-row--flex is-justify-center" v-show="state.setting.showSearchInput">
      <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
        <Search></Search>
      </el-col>
    </el-row>
    <div class="site_wrapper" v-for="nav in navList" :key="nav.id">
      <div class="site_title horizontalFlex" :id="`menu${nav.menuId}`">
        <el-icon>
          <price-tag />
        </el-icon>
<!--        <ion-icon name="bookmark-outline" size="small"></ion-icon>-->
        {{ nav.menuName }}
      </div>
      <el-row :gutter="20" class="app_NavBax">
        <el-col :xs="24" :sm="24 / state.setting.rowNumber" :md="24 / state.setting.rowNumber" :lg="24 / state.setting.rowNumber" :xl="24 / state.setting.rowNumber" v-for="item in nav.siteList" :key="item.siteId">
          <NavBox :data="item"></NavBox>
        </el-col>
      </el-row>
    </div>
    <el-backtop target=".app_mainView .el-scrollbar__wrap" :right="25" :bottom="20"/>
    <el-backtop target=".app_mainView .el-scrollbar__wrap" :right="25" :bottom="70">
      <el-icon :size="18" @click.stop="handleSearchDialog">
        <SearchIcon></SearchIcon>
      </el-icon>
    </el-backtop>

    <!-- 弹出搜索对话框 -->
    <el-dialog v-model="showSearchDialog" title="搜索" :width="state.isMobile ? 'calc(100% - 40px)' : '40%'" center><search v-if="showSearchDialog"/></el-dialog>
  </el-scrollbar>
</template>

<script setup lang="ts">
import { Search as SearchIcon,PriceTag } from "@element-plus/icons-vue";
import Search from '@/components/Search/index.vue';
import NavBox from '@/components/Nav/NavBax.vue';
import { getSiteData } from "@/assets/js/mock";
import { ref } from "vue";
import { useStore } from "vuex";

let store = useStore();
let state = store.state;
const showSearchDialog = ref(false);
const navList = ref(getSiteData());
const handleSearchDialog = () => {
  showSearchDialog.value = true;
  return false;
};
</script>

<style scoped lang="scss">
.app_mainView {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 20px 20px 20px;
  :deep(.el-dialog__body){
    padding-top: 0;
  }
  :deep(.el-scrollbar__wrap){
    overflow-x: hidden;
    .el-scrollbar__view{
      overflow-x: hidden;
    }
  }
  .site_wrapper{
    width: calc(100vw - 250px);
    margin: 0 auto;
    @media only screen and (max-width: 768px) {
      width: 100%;
    }
    .site_title{
      padding-top: 10px;
      ion-icon{
        margin-right: 0.2em;
      }
    }
    .site_main{
      width: 100%;
      display: flex;
    }
  }
}
</style>